<template>
    <div class="card rdsp-card-view" data-page="UnitRealtimeState">
        <div class="card-content card-content-padding">
            <p class="rdsp-card-title">联网单位实时状态</p>
            <div class="row no-gap unitRealtimeState-row">
                <div class="col" style="margin-top: 10px;">
                    <a href="/unitStatList/1/" class="alarm_bot_pdd" data-view=".view-main">
                        <p class="textcolor texttop">报警单位</p>
                        <p class="textnumber morenum_one" id="alertUnit"></p>
                    </a>
                </div>
                <div class="col">
                    <a href="/unitStatList/0/" class=" normal_bot_pdd" data-view=".view-main">
                        <p class="textcolor betwtexttop">联网单位</p>
                        <p class="textnumber_nol alltext" id="allUnit" style="bottom: 12px;"></p>
                    </a>
                </div>
                <div class="col" style="margin-top: 10px;">
                    <a href="/unitStatList/2/" class="fault_bot_pdd" data-view=".view-main">
                        <p class="textcolor texttop">故障单位</p>
                        <p class="textnumber morenum_two" id="faultUnit"></p>
                    </a>
                </div>
            </div>
        </div>
        <div class="list media-list lineborW unitStat-list-unit">
            <ul></ul>
        </div>
        <!--更多按钮-->
        <a href="/unitStatList/0/" class="morelist" data-view=".view-main">
            <i class="iconfont app-icon-down icon-xiala"></i>
        </a>
    </div>
</template>
<style scoped>
    .unitStat-list-unit {
        z-index: 0;
        margin-top: 0px !important;
        overflow-y: auto;
        margin-left: 14px;
        margin-right: 14px;
        bottom: 5px;
        padding-bottom: 4px;
    }
    .unitStat-list-unit .list ul:before {
        height: 0px;
    }
    .unitStat-list-unit .item-inner {
        display: inline-block;
        padding-right: 10px !important;
    }
    .unitStat-list-unit .row {
        width: 100%;
        font-size: 12px;
    }
    .unitStat-list-unit img {
        border-radius: 12px;
    }
    .unitStat-list-unit .row div {
        width: 25% !important;
    }
    .unitStat-list-unit .links-list a, .list .item-link .item-inner,  .media-list .item-link .item-title-row,  li.media-item .item-link .item-title-row {
        background-image: none;
    }
    .unitStat-list-unit .row i {
        font-size: 13px;
        font-weight: bold;
    }
    .lineborW ul:before {
        height: 0px;
    }
    .lineborW ul:after {
        height: 0.3px;
    }
    .unitRealtimeState-row a {
        margin: 0 auto;
        position: relative;
        text-align: center;
    }
    .unitRealtimeState-row a p {
        padding: 0px;
        margin: 0px;
    }
    .morelist {
        width: 100%;
        height: 30px;
        line-height: 35px;
        display: inline-block;
        text-align: center;
    }
    .textnumber, .textcolor {
        position: absolute;
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 33px;
    }
    .textnumber {
        bottom: 2px;
    }
    .textnumber_nol{
        position: absolute;
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 35px;
        bottom: 2px;
    }
    .alltext i{
        font-size: 35px;
    }
    .morenum_one i{
        font-size: 33px;
    }
    .morenum_two i{
        font-size: 33px;
    }
    .textcolor {
        top: 2px;
        font-size: 12px;
    }
    .betwtexttop {
        font-size: 14px;
    }
    .alarm_bot_pdd {
        display: block;
        background-image: url(./img/UnitRealtimeState/alarm_bot.png);
        background-repeat: no-repeat;
        background-position: center;
        width: 70px;
        height: 61px;
    }
    .fault_bot_pdd {
        display: block;
        background-image: url(./img/UnitRealtimeState/fault_bot.png);
        background-repeat: no-repeat;
        background-position: center;
        width: 70px;
        height: 61px;
    }
    .normal_bot_pdd {
        display: block;
        background-image: url(./img/UnitRealtimeState/normal_bot.png);
        background-repeat: no-repeat;
        background-position: center;
        width: 96px;
        height: 80px;
    }
</style>
<script>
    return {
        methods: {
            getUnitStatData:function(){
                Dao.orgFcfRealTimeStatusCount({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    orgIds:userInfor.organizationIds,
                },function (data) {

                    $("#alertUnit").html(
                        common.transNullundefined(data.alert.toString())
                    )
                    $("#faultUnit").html(
                        common.transNullundefined(data.fault.toString())
                    )
                    $("#allUnit").html(
                        common.transNullundefined(data.total.toString())
                    )

                    if (data.alert.toString().length >= 4) {
                        $(".morenum_one").css("font-size", "23px");
                        $(".morenum_one").css("bottom", "10px");
                    }
                    if (data.fault.toString().length >= 4) {
                        $(".morenum_two").css("font-size", "23px");
                        $(".morenum_two").css("bottom", "10px");
                    }
                    if (data.total.toString().length >= 5) {
                        $(".alltext").css("font-size", "26px");
                        $(".alltext").css("bottom", "17px");
                    }
                });
            },
            getUnitStatList:function(){
                Dao.UnitRealtimeState({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    orgIds:userInfor.organizationIds,
                    fireTType:0,
                    pageIndex:0,
                    pageSize:3
                }, function (data) {
                    var listdata = [];
                    listdata = data;
                    if (listdata && listdata.length > 0) {
                        $(".unitStat-list-unit ul").empty();
                        for (var i = 0; i < listdata.length; i++) {
                            var logoimage = '';
                            logoimage = listdata[i].logoUrl;
                            if (logoimage == "" || typeof(logoimage) == "undefined") {
                                logoimage = staticPath + "img/UnitRealtimeState/unit_all.png";
                            }
                            $(".unitStat-list-unit ul").append(
                                `<li>
                                  <a href="/moreDectorState/0/`+ listdata[i].organizationId +`/`+listdata[i].organizationName+`/0/" class="item-link item-content" data-view=".view-main">
                                    <div class="item-media">
                                        <img src="` + logoimage + `" width="40"/>
                                    </div>
                                    <div class="item-inner">
                                      <div class="item-title">
                                        <div class="item-title unit-list-fone" style="font-size: 14px">` + listdata[i].organizationName + `</div>
                                      </div>
                                      <div class="row">
                                        <div class="col">
                                            <i class="f7-icons" style="color: #fc4962;">circle</i>
                                            <span class="unitStat-list-unit-name">报警</span>
                                            <span class="stat-type-num">` + listdata[i].fireNum + `</span>
                                        </div>
                                        <div class="col">
                                            <i class="f7-icons" style="color: #ffcd65;">circle</i>
                                            <span class="unitStat-list-unit-name">故障</span>
                                            <span class="stat-type-num">` + listdata[i].faultNum + `</span>
                                        </div>
                                        <div class="col">
                                            <i class="f7-icons" style="color: #c8c6c7;">circle</i>
                                            <span class="unitStat-list-unit-name">屏蔽</span>
                                            <span class="stat-type-num">` + listdata[i].shieldNum + `</span>
                                        </div>
                                        <div class="col">
                                            <i class="f7-icons" style="color: #37ef7d;">circle</i>
                                            <span class="unitStat-list-unit-name">正常</span>
                                            <span class="stat-type-num">` + listdata[i].normalNum + `</span>
                                        </div>
                                      </div>
                                    </div>
                                  </a>
                                </li>`
                            )
                        }
                        if (screen.width <= 375) {
                            $(".unitStat-list-unit-name").hide();
                            $(".unitStat-list-unit .row").css("font-size", "12px");
                        }
                    }
                });
            }
        },
        on: {
            pageAfterIn: function (e, page) {
                var self = this;
                self.getUnitStatData();
                self.getUnitStatList();
            }
        }
    }
</script>